﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">jqxTouch is providing few useful events for touch devices (swipe,
        swipeleft, swiperight, swipetop, swipebottom, orientation, tap and taphold). In
        the demo bellow you can try the swipeleft, swiperight and tap events. Just slide
        your pointer over the text fields bellow the rhino picture to change the text. To
        trigger tap event just tap on the rhino picture.</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxtouch.js"></script>
    <script type="text/javascript" src="simulator.js"></script>
    <style type="text/css">
    html, body
    {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            prepareDemo("dataContainer");
            $('.rhino-data-field').jqxTouch();
            $('.rhino-picture').jqxTouch();

            function setText(container, text) {
                container.children('div').fadeOut(200, function () {
                    $(this).html('<div>' + text + '</div>').fadeIn(200);
                });
            }

            $('.rhino-data-field').bind('swipeleft', function () {
                setText($(this), "You've swiped left");
            });

            $('.rhino-data-field').bind('swiperight', function () {
                setText($(this), "You've swiped right");
            });

            $('.rhino-picture').bind('tap', function () {
                var pic = $(this);
                if (!pic.is(':animated')) {
                    pic.animate({ marginLeft: 60 }, 180, function () {
                        pic.animate({ marginLeft: 120 }, 160, function () {
                            pic.animate({ marginLeft: 100 }, 140);
                        });
                    });
                }
            });
            initDemo("dataContainer");
        });
    </script>
</head>
<body class="default">
    <div id="demoContainer" style="margin-left: 220px; width: 460px; height: 855px; overflow: hidden;
        background-image: url(../images/iphone.png);">
        <div id="container" style="background-image: url(../images/ipadbackground.png); margin-left: 46px;
            height: 518px; width: 365px; margin-top: 185px;">
            <div id="dataContainer" style="">
                <div class="rhino-header">
                    Rhinoceros</div>
                <table style="width: 100%;">
                    <tbody>
                        <tr>
                            <td>
                                <div class="rhino-picture">
                                </div>
                            </td>
                        </tr>
                        <tr><td class="rhino-label" align="center" valign="middle">Swipe any item</td></tr>
                        <tr>
                            <td>
                                <div class="rhino-data">
                                    <div class="rhino-data-field rhino-data-field-top">
                                        <div>
                                            Kingdom <span>Swipe Animalia</span></div>
                                    </div>
                                    <div class="rhino-data-field">
                                        <div>
                                            Phylum <span>Chordata</span></div>
                                    </div>
                                    <div class="rhino-data-field">
                                        <div>
                                            Class <span>Mammalia</span></div>
                                    </div>
                                    <div class="rhino-data-field">
                                        <div>
                                            Infraclass <span>Eutheria</span></div>
                                    </div>
                                    <div class="rhino-data-field">
                                        <div>
                                            Order <span>Perissodactyla</span></div>
                                    </div>
                                    <div class="rhino-data-field">
                                        <div>
                                            Suborder <span>Ceratomorpha</span></div>
                                    </div>
                                    <div class="rhino-data-field">
                                        <div>
                                            Superfamily <span>Rhinocerotoidea</span></div>
                                    </div>
                                    <div class="rhino-data-field rhino-data-field-bottom" style="border-bottom-width: 0px;">
                                        <div>
                                            Family <span>Rhinocerotidae</span></div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <style type="text/css">
                .rhino-picture
                {
                    width: 160px;
                    height: 160px;
                    background-image: url(../images/rhino.jpg);
                    border-radius: 160px;
                    -moz-border-radius: 160px;
                    -webkit-border-radius: 160px;
                    -webkit-box-shadow: 0px 0px 15px 2px rgba(87, 105, 45, 1);
                    box-shadow: 0px 0px 15px 2px rgba(87, 105, 45, 1);
                    margin-left: 100px;
                    margin-top: 12px;
                }
                .rhino-data
                {
                    width: 80%;
                    border-radius: 10px;
                    -webkit-border-radius: 10px;
                    -moz-border-radius: 10px;
                    overflow: hidden;
                    margin-left: 10%;
                    border: 1px solid #999999;
                    margin-top: 2px;
                }
                .rhino-data-field
                {
                    background-color: #f9f9f9;
                    padding: 6px;
                    border-bottom: 1px solid #e0e0e0;
                    font-weight: bold;
                    font-family: Sans-Serif;
                    font-size: 15px;
                }
                .rhino-data-field-top
                {
                    -webkit-border-top-left-radius: 10px;
                    -webkit-border-top-right-radius: 10px;
                    -moz-border-radius-topleft: 10px;
                    -moz-border-radius-topright: 10px;
                    border-top-left-radius: 10px;
                    border-top-right-radius: 10px;
                }
                .rhino-data-field-bottom
                {
                    -webkit-border-bottom-right-radius: 10px;
                    -webkit-border-bottom-left-radius: 10px;
                    -moz-border-radius-bottomright: 10px;
                    -moz-border-radius-bottomleft: 10px;
                    border-bottom-right-radius: 10px;
                    border-bottom-left-radius: 10px;
                }
                .rhino-data-field span
                {
                    float: right;
                    color: #bbb;
                }
                .rhino-label
                {
                    font-size: 16px;
                    font-family: Sans-Serif;
                    text-align: center;
                    color: #888;
                    padding-top: 10px;
                }
                .rhino-header
                {
                    width: 100%;
                    height: 30px;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    background: #ffffff;
                    background: -moz-linear-gradient(top,  #ffffff 0%, #eaeaea 40%, #cecece 100%);
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(40%,#eaeaea), color-stop(100%,#cecece));
                    background: -webkit-linear-gradient(top,  #ffffff 0%,#eaeaea 40%,#cecece 100%);
                    background: -o-linear-gradient(top,  #ffffff 0%,#eaeaea 40%,#cecece 100%);
                    background: -ms-linear-gradient(top,  #ffffff 0%,#eaeaea 40%,#cecece 100%);
                    background: linear-gradient(to bottom,  #ffffff 0%,#eaeaea 40%,#cecece 100%);
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cecece',GradientType=0 );
                    font-size: 26px;
                    font-family: Sans-Serif;
                    text-align: center;
                    color: #888;
                    font-weight: bold;
                    border-bottom: 1px solid #999;
                }
                #dataContainer
                {
                    -webkit-touch-callout: none;
                    -webkit-user-select: none;
                    -khtml-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                    width: 365px;
                    height: 518px;
                    background-image: url(../../images/ipadbackground.png);
                }
            </style>
        </div>
    </div>
</body>
</html>
